<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>首页 - 光年(Light Year Admin)后台管理系统模板</title>
    <link rel="icon" href="../favicon.ico" type="image/ico" />
    <meta
      name="keywords"
      content="LightYear,光年,后台模板,后台管理系统,光年HTML模板"
    />
    <meta
      name="description"
      content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。"
    />
    <meta name="author" content="yinqi" />
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/materialdesignicons.min.css" rel="stylesheet" />
    <link href="../css/style.min.css" rel="stylesheet" />
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link
      href="https://unpkg.com/layui@2.9.9/dist/css/layui.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div class="lyear-layout-web">
      <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">
          <!-- logo -->
          <div id="logo" class="sidebar-header">
            <a href="../index.html"
              ><img
                src="../images/logo-sidebar.png"
                title="LightYear"
                alt="LightYear"
            /></a>
          </div>
          <div class="lyear-layout-sidebar-scroll">
            <nav class="sidebar-main">
              <ul class="nav nav-drawer">
                
                <li class="nav-item nav-item-has-subnav">
                  <a href="javascript:void(0)"
                    ><i class="mdi mdi-file-outline"></i> 学生管理</a
                  >
                  <ul class="nav nav-subnav">
                    <li>
                      <a href="../lms-admin/student_table.html">学生列表</a>
                    </li>
                  </ul>
                </li>
             

               
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"
                ><i class="mdi mdi-file-outline"></i> 班级管理</a
              >
              <ul class="nav nav-subnav">
                <li>
                  <a href="../lms-teacher/create_clazz.html">创建班级</a>
                </li>
                <li>
                  <a href="../lms-admin/clazz_info.html">学习情况</a>
                </li>
              </ul>
            </li>


                <li class="nav-item nav-item-has-subnav">
                  <a href="javascript:void(0)"
                    ><i class="mdi mdi-file-outline"></i> 作业管理</a
                  >
                  <ul class="nav nav-subnav">
                    <li><a href="../lms-teacher/create_assignment.html">发布作业</a></li>
                    <li><a href="../lms-teacher/assignment_list.html">作业列表</a></li>
                  </ul>
                </li>
                <li class="nav-item nav-item-has-subnav">
                  <a href="javascript:void(0)"
                    ><i class="mdi mdi-file-outline"></i> 问卷管理</a
                  >
                  <ul class="nav nav-subnav">
                    <li><a href="../lms-teacher/create_questionnaire.html">发布问卷</a></li>
                    <li><a href="../lms-teacher/questionnaire_list.html">问卷列表</a></li>
                  </ul>
                </li>
                <li class="nav-item nav-item-has-subnav">
                  <a href="javascript:void(0)"
                    ><i class="mdi mdi-file-outline"></i> 论坛管理</a
                  >
                  <ul class="nav nav-subnav">
                    <li><a href="../lms-teacher/create_forum.html">发布帖子</a></li>
                    <li><a href="../lms-teacher/forum_list.html">帖子列表</a></li>
                    <li><a href="../lms-teacher/forum_list_self.html">我的帖子</a></li>
                  </ul>
                </li>
              </ul>
            </nav>
          </div>
        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">
          <nav class="navbar navbar-default">
            <div class="topbar">
              <div class="topbar-left">
                <div class="lyear-aside-toggler">
                  <span class="lyear-toggler-bar"></span>
                  <span class="lyear-toggler-bar"></span>
                  <span class="lyear-toggler-bar"></span>
                </div>
                <span class="navbar-page-title"> 后台首页 </span>
              </div>

              <div class="topbar-right">
                <a href="javascript:void(0)" data-toggle="dropdown">
                  <span>笔下光年 <span class="caret"></span></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-right">
                  <li>
                    <a href="../lyear_pages_login.html"
                      ><i class="mdi mdi-logout-variant"></i> 退出登录</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">
          <div class="container-fluid">
            <div class="row">
              <div class="col-lg-12">
                <div class="card">
                  <div class="card-body">
                    <div class="table-responsive">
                      <table class="layui-hide" id="ID-table-demo-data"></table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
        <!--End 页面主要内容-->
      </div>
    </div>

    <script src="https://unpkg.com/layui@2.9.9/dist/layui.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script
      type="text/javascript"
      src="../js/perfect-scrollbar.min.js"
    ></script>
    <script type="text/javascript" src="../js/main.min.js"></script>
    <script type="text/javascript" src="../js/http.js"></script>

    <script type="text/javascript">
      var res = httpListPost({ id: 0, type: 0 });
      if (res.success) {
        console.log("数据", res.data);
      } else {
        alert("查询失败！");
      }

      layui.use("table", function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        // 已知数据渲染
        var inst = table.render({
          elem: "#ID-table-demo-data",
          cols: [
            [
              //标题栏
              { field: "id", title: "ID", width: 80, sort: true },
              { field: "userName", title: "用户名称", width: 120 },
              { field: "title", title: "帖子标题", width: 100 },
              { field: "content", title: "帖子内容", minwidth: 100 },
              { field: "roleName", title: "角色名称", width: 100 },
              // {field: 'createTime', title: '创建时间', width: 160},
              {
                title: "操作",
                width: 200,
                templet: function (d) {
                  return (
                    '<button class="layui-btn layui-btn-xs edit-btn" data-id="' +
                    d.id +
                    '">编辑</button>' +
                    '<button class="layui-btn layui-btn-xs layui-btn-danger delete-btn" data-id="' +
                    d.id +
                    '">删除</button>'
                  );
                },
              },
            ],
          ],
          data: res.data.records,
          //skin: 'line', // 表格风格
          //even: true,
          page: true, // 是否显示分页
          limits: [5, 10, 15],
          limit: 5, // 每页默认显示的数量
        });
        // 动态绑定点击事件
        $(document).on("click", ".edit-btn", function () {
          var id = $(this).data("id");
          // 获取该行数据
          var rowData = table.cache["ID-table-demo-data"].find(
            (row) => row.id == id
          );
          if (rowData) {
            // 创建表单内容
            var formContent =
              '<form class="layui-form" lay-filter="editForm">' +
              '<div class="layui-form-item">' +
              '<label class="layui-form-label">ID</label>' +
              '<div class="layui-input-block">' +
              '<input type="text" name="id" required lay-verify="required" readonly class="layui-input" value="' +
              rowData.id +
              '">' +
              "</div>" +
              "</div>" +
              '<div class="layui-form-item">' +
              '<label class="layui-form-label">帖子标题</label>' +
              '<div class="layui-input-block">' +
              '<input type="text" name="title" required lay-verify="required" readonly class="layui-input" value="' +
              rowData.title +
              '">' +
              "</div>" +
              "</div>" +
              '<div class="layui-form-item">' +
              '<label class="layui-form-label">帖子内容</label>' +
              '<div class="layui-input-block">' +
              '<textarea name="content" required lay-verify="required" readonly class="layui-textarea">' +
              rowData.content +
              "</textarea>" +
              "</div>" +
              "</div>" +
              '<div class="layui-form-item">' +
              '<label class="layui-form-label">回复</label>' +
              '<div class="layui-input-block">' +
              '<input type="text" name="reply" class="layui-input">' +
              "</div>" +
              "</div>" +
              '<div class="layui-form-item">' +
              '<div class="layui-input-block">' +
              '<button class="layui-btn" lay-submit lay-filter="saveEdit">保存</button>' +
              "</div>" +
              "</div>" +
              "</form>" +
              '<div id="replyTable" class="layui-table"></div>'; // 添加一个空的 div 用来放置数据表格

            // 弹出编辑表单
            layer.open({
              type: 1,
              title: "编辑",
              area: ["1000px", "400px"], // 设置宽度和高度
              content: formContent,
              success: function (layero, index) {
                //获取回复列表
                console.log("rowData.id", rowData.id);
                var res = httpPostReply({ id: rowData.id });
                var relpys = [];
                for (let i in res.data.records) {
                  var reply = {
                    replyId: res.data.records[i].userId,
                    replyContent: res.data.records[i].content,
                  };
                  relpys.push(reply);
                }

                // 创建空的数据表格
                table.render({
                  elem: "#replyTable",
                  cols: [
                    [
                      //表头
                      { field: "replyId", title: "回复用户", width: "30%" },
                      {
                        field: "replyContent",
                        title: "回复内容",
                        width: "70%",
                      },
                    ],
                  ],
                  data: relpys, // 初始为空数据
                });
              },
            });

            // 表单初始赋值
            form.val("editForm", rowData);

            // 监听表单提交
            form.on("submit(saveEdit)", function (data) {
              var formData = data.field;
              console.log(formData); // 输出表单数据

              var res = httpUpdatePost(formData);
              if (res.success) {
                layer.msg("修改成功！");

                if (formData.reply != null) {
                  //回复帖子
                  var res = httpAddReply({
                    postId: formData.id,
                    content: formData.reply,
                  });
                }
              } else {
                layer.msg("修改失败！");
              }

              // 暂时只是关闭弹窗和重新加载表格数据
              layer.closeAll(); // 关闭弹窗
              table.reload("ID-table-demo-data"); // 重新加载表格数据
              return false; // 阻止表单默认提交
            });
          }
        });
        // 动态绑定删除按钮点击事件
        $(document).on("click", ".delete-btn", function () {
          var id = $(this).data("id");
          layer.confirm(
            "确认删除该条记录吗？",
            { icon: 3, title: "提示" },
            function (index) {
              var res = httpDeletePost({ id: id });
              if (res.success) {
                layer.msg("删除成功！");
                location.reload();
              } else {
                layer.msg("删除失败！");
              }

              // 暂时只是删除表格中的数据
              table.cache["ID-table-demo-data"] = table.cache[
                "ID-table-demo-data"
              ].filter((row) => row.id != id);
              table.reload("ID-table-demo-data"); // 重新加载表格数据

              layer.close(index); // 关闭确认框
            }
          );
        });
      });
    </script>
  </body>
</html>
